<template>
  	<div class="box">
		<TOPNAV/>
		<main aria-labelledby="main-title" class="home">
			<header class="hero">
				<img src="../assets/img/hero.jpg" alt="hero">
				<h1 id="main-title">网测必胜题库</h1>
				<p class="description">四大笔试/网测完美解决方案</p>
				<p class="action">
					<router-link to="/exam/index" rel="noopener noreferrer" class="nav-link external action-button">游客模式免费体验 →
  					<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound">
							<path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path>
							<polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon>
						</svg>
					</router-link>
				</p>
			</header>
			<div class="features">
				<div class="feature">
					<h2>定制化系统</h2>
					<p>针对四大的笔试/网测分别专门定制系统进行应对：PwC的网页版模拟游戏+攻略+可检索的参考答案；KPMG和DTT的全真刷题系统和全真模拟系统</p>
				</div>
				<div class="feature">
					<h2>游戏模拟</h2>
					<p>专业程序员编写PwC/EY的GBA测试中考验反应和手速的游戏的网页模拟版，助你提前练习取得高分</p>
				</div>
				<div class="feature">
					<h2>考试模拟</h2>
					<p>将所有KPMG/DTT的题目以文本形式录入系统，做成刷题系统和模拟系统。刷题系统有详细专业的解析和答案，模拟系统可以全真模拟考试系统，让您提前感受考试</p>
				</div>
			</div>
			<div class="theme-default-content custom content__default">
				<div class="custom-block tip">
					<p class="custom-block-title">提示</p>
					<ul>
						<li>邀请码返现：每位客户都有专属邀请码和邀请码链接。新买家填写邀请立获5元优惠券，同时推荐人10%现金提成</li>
						<li>如果您没有时间复习或者练了很久但是就是不擅长，请联系微信13186818552备注需要助攻的科目，编写系统的小哥哥亲自给你最强助攻</li>
						<li>点击加入四大求职交流群：
							<a href="" target="_blank" rel="noopener noreferrer">
								879603651
								<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound">
								<path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path>
								<polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon>
								</svg>
							</a>
						</li>
					</ul>
				</div>
				<div style="min-height:30px;text-align:center;margin-bottom:20px;">
					<div style="display:inline-block;">
						<img src="http://resources.joytook.com/qrcode_for_taobao.png" style="width:120px;height:120px;">
						<div styl="text-algin: center; line-height: 22px;  padding: 0 20px;">
							<a href="https://shop313871564.taobao.com/" target="_blank">淘宝店</a>
						</div>
					</div>
					<div style="display:inline-block;">
						<img src="http://resources.joytook.com/qrcode_for_gongzhonghao.jpg" style="width:120px;height:120px;padding:0 100px;">
						<div styl="text-algin: center; line-height: 22px;">公众号</div>
					</div>
				</div>
				<div style="text-align:center;margin-bottom:10px;color:gray!important;font-size:12px;">
					MIT Licensed | Copyright © 2019 &nbsp;&nbsp;&nbsp;
					<a href="http://www.beian.miit.gov.cn" target="_blank" style="color:gray!important;font-size:12px;">浙ICP备18053425号-2</a>
				</div>
			</div>
		</main>
	</div>

</template>

<script>
import TOPNAV from '@/components/navigation/Nav'
export default {
	name: 'Home',
	components:{
		TOPNAV
	},
	data(){
		return{

		}
	},
	mounted(){

	},
	methods:{

	}
}
</script>

<style lang="scss" scoped>
	.home {
		padding: 1.6rem 2rem 0;
		max-width: 960px;
		margin: 0 auto;
		display: block;
		.hero {
			text-align: center;
			img {
				max-width: 100%;
				max-height: 280px;
				display: block;
				margin: 3rem auto 1.5rem;
			}
			.action,.description,h1 {
				margin: 1.8rem auto;
			}
			.action-button {
				display: inline-block;
				font-size: 1.2rem;
				color: #fff;
				background-color: #3eaf7c;
				padding: .8rem 1.6rem;
				border-radius: 4px;
				-webkit-transition: background-color .1s ease;
				transition: background-color .1s ease;
				-webkit-box-sizing: border-box;
				box-sizing: border-box;
				border-bottom: 1px solid #389d70;
			}
		}
		.features {
			border-top: 1px solid #eaecef;
			padding: 1.2rem 0;
			margin-top: 2.5rem;
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-ms-flex-wrap: wrap;
			flex-wrap: wrap;
			-webkit-box-align: start;
			-ms-flex-align: start;
			align-items: flex-start;
			-ms-flex-line-pack: stretch;
			align-content: stretch;
			-webkit-box-pack: justify;
			-ms-flex-pack: justify;
			justify-content: space-between;
		}
		.feature {
			-webkit-box-flex: 1;
			-ms-flex-positive: 1;
			flex-grow: 1;
			-ms-flex-preferred-size: 30%;
			flex-basis: 30%;
			max-width: 30%;
			h2 {
				font-size: 1.4rem;
				font-weight: 500;
				border-bottom: none;
				padding-bottom: 0;
				color: #3a5169;
				margin: 0.83em 0;
			}
			p {
				color: #4e6e8e;
				margin: 1em 0;
			}
		}
		.theme-default-content.custom {
			padding: 0;
			margin: 0;
		}
		.custom-block.danger,.custom-block.tip,.custom-block.warning {
			padding: .1rem 1.5rem;
			border-left-width: .5rem;
			border-left-style: solid;
			margin: 1rem 0;
		}
		.custom-block.tip {
			background-color: #f3f5f7;
			border-color: #42b983;
		}
		.custom-block{
			.custom-block-title {
				font-weight: 600;
				margin-bottom: -.4rem;
			}
			color: #2c3e50;
			ol, p, ul {
				line-height: 1.7;
				margin: 1em 0;
			}
			ol, ul {
				padding-left: 1.2em;
				list-style:disc;
			}
		}
	}
	@media (max-width: 419px){
		.home {
			padding-left: 1.5rem;
			padding-right: 1.5rem;
			.hero{
				img {
					max-height: 210px;
					margin: 2rem auto 1.2rem;
				}
				.action,.description,h1 {
					margin: 1.2rem auto;
				}
				h1 {
					font-size: 2rem;
				}
				.action-button {
					font-size: 1rem;
					padding: .6rem 1.2rem;
				}
			}
			.feature{
				h2 {
					font-size: 1.25rem;
				}
			}
		}
	}
	@media (max-width: 719px){
		.home{
			.features {
				-webkit-box-orient: vertical;
				-webkit-box-direction: normal;
				-ms-flex-direction: column;
				flex-direction: column;
			}
			.feature {
				max-width: 100%;
				padding: 0 2.5rem;
			}
		}
	}
</style>
